<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <meta name="generator" content="Hugo 0.98.0" />

  
  <meta name="description" content="走在通往幸福的路上">
  

  
  <link rel="apple-touch-icon" sizes="180x180" href="https://blog.v5u.win/apple-touch-icon.png">

  
  <link rel="icon" type="image/png" sizes="32x32" href="https://blog.v5u.win/favicon-32x32.png">

  
  <link rel="icon" type="image/png" sizes="16x16" href="https://blog.v5u.win/favicon-16x16.png">

  
  <link rel="manifest" href="https://blog.v5u.win/site.webmanifest">

  
  <link rel="mask-icon" href="https://blog.v5u.win/safari-pinned-tab.svg" color="">

  <meta name="msapplication-TileColor" content="">

  <meta name="theme-color" content="">

  
  <link rel="stylesheet" href="https://blog.v5u.win/css/bootstrap.min.css" />

  
  <title>ReactNative如何真机测试 | 为吾优</title>
  

  <style>
body {
  min-width: 300px;
}

.custom-navbar {
  margin-bottom: 1em;
  height: 60px;
}

.custom-navbar a {
  display: inline-block; 
  padding: 18px 0;
  margin-right: 1em; 
  font-weight: bold; 
}

.custom-navbar a:hover,
.custom-navbar a:focus {
  text-decoration: none; 
}

@media print {
  .custom-navbar {
    display: none;
  }
}

article {
  padding-bottom: 1em;
}

img {
  max-width: 100%;
}


body {
  background-color: #fff;
}



body {
  color: #212529;
}



a {
  color: #007bff;
}



a:hover,
a:focus {
  color: #0056b3;
}



.custom-navbar {
  background-color: #212529;
}



.custom-navbar a {
  color: rgba(255,255,255,.75);
}



.custom-navbar a:hover,
.custom-navbar a:focus {
  color: rgba(255,255,255,1);
}



.container {
  max-width: 800px;
}





</style>
</head>

<body>
  <nav class="custom-navbar">
  <div class="container">
    
    <a href="/">文章</a>
    
    <a href="/tags/">标签</a>
    
    <a href="/about/">关于</a>
    
    <a href="/index.xml">RSS</a>
    
  </div>
</nav>
  
  <div class="container">
    <article>
      <h1>ReactNative如何真机测试</h1>
<p>初始学习ReactNative 最想现在真机上一睹为快，对于非零基础的程序员，最重要的是先搞明白整个工程的创建到完结的流程，对于编程语言来说从hello world，对于一个完整的项目开发平台，则从一个最简单的dome项目开始。</p>
<p>iOS 真机调试</p>
<p>方法一：（从设备访问开发服务器）</p>
<p>首先，你的笔记本电脑和你的手机必须处于相同的 wifi 网络中。</p>
<p>打开 iOS 项目的 AppDelegate.m 文件</p>
<p>更改 jsCodeLocation 中的 localhost 改成你电脑的局域网IP地址</p>
<p>在 Xcode 中，选择你的手机作为目标设备，Run 即可</p>
<p>可以通过晃动设备来打开开发菜单(重载、调试等)</p>
<p>方法二：（使用离线包）</p>
<p>你也可以将应用程序本身的所有 JavaScript 代码打包。这样你可以在开发服务器没有运行时测试它，并把应用程序提交到到 AppStore。</p>
<p>打开 iOS / AppDelegate.m</p>
<p>遵循“选项 2”的说明：</p>
<p>取消 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”main” withExtension:@”jsbundle”];</p>
<p>在你应用程序的根目录的终端运行给定 curl 命令 （$ curl “http://localhost:8081/Game2048.bundle?platform=ios” -o main.jsbundle ）//此时应该先在本地启动服务(react-native start)</p>
<p>//打包项目的根目录下的 js 文件到 main.jsbundle (可以直接使用上述 curl 方法打包 javascript 即可) $ react-native bundle [–minify]</p>
<p>Packager 支持几个选项：</p>
<p>dev(默认的 true)——设置了 <strong>DEV</strong> 变量的值。当是 true 时，它会打开一堆有用的警告。对于产品，它建议使用 dev = false。</p>
<p>minify(默认的 false)——只要不通过 UglifyJS 传输 JS 代码。</p>
<p>故障排除</p>
<p>如果 curl 命令失败，确保 packager 在运行。也尝试在它的结尾添加 ——ipv4 标志。</p>
<p>如果你刚刚开始了你的项目，main.jsbundle 可能不会被包含到 Xcode 项目中。要想添加它,右键单击你的项目目录，然后单击“添加文件……”——选择生成的 main.jsbundle 文件。</p>
<p>本文参考Jack008的blog: <a href="http://my.oschina.net/jack088/blog/515248">http://my.oschina.net/jack088/blog/515248</a></p>

    </article>
  </div>

  
  
  

  
</body>

</html>